<template>
  <el-popover
    placement="bottom-end"
    width="500"
    trigger="click">
    <el-table ref="dragTable"
              class="column-table" :data="fieldInfo" row-key="columnName" :max-height="tableHeight+'px'"
              highlight-current-row>
      <el-table-column label="排序" width="50px" class-name="allowDrag" align="center">
        <i class="el-icon-rank"></i>
      </el-table-column>
      <el-table-column min-width="100px">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="isAllShow" @change="changeAllShow">是否展示</el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isList" true-label="1" false-label="0">{{scope.row.columnComment}}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="能否排序" width="80px" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isAllowSort" true-label="1" false-label="0"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="固定展示" width="100px" align="center">
        <template slot-scope="scope">
          <div class="fixed-box">
            <el-tooltip class="item" effect="dark" content="固定显示在表格左侧" placement="top-end">
              <i class="el-icon-s-fold" @click="changeFixed(scope.row,'left')" :style="activeStyle(scope.row,'left')"></i>
            </el-tooltip>
            <span class="divide">|</span>
            <el-tooltip class="item" effect="dark" content="固定显示在表格右侧" placement="top-end">
              <i class="el-icon-s-unfold" @click="changeFixed(scope.row,'right')" :style="activeStyle(scope.row,'right')"></i>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;padding:20px" v-if="formBuildKey">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="danger" @click="reset">重置</el-button>
    </div>
    <el-tooltip slot="reference" effect="dark" content="表格列过滤展示" placement="left">
      <img :src="filterIcon" class="column-set"/>
    </el-tooltip>
  </el-popover>
</template>
<script>
import request from "@/utils/request";
import Sortable from "sortablejs";
import columnFilter from '@/assets/icons/columnFilter.png'
export default {
  name: "TableColumnConfig",
  components: {
  },
  props: {
    //业务模块配置信息
    formBuildKey: {
      default: ''
    },
    //表单字段信息
    fieldInfo: {
      type: Array,
      default:()=>[]
    }
  },
  computed:{
    theme() {
      return this.$store.state.settings.theme;
    }
  },
  data() {
    return {
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 350,
      // 是否全局显示或隐藏
      isAllShow: true,
      // 过滤图标
      filterIcon: columnFilter
    };
  },
  created() {
  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    const sortable = Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: evt => {
        const targetRow = this.fieldInfo.splice(evt.oldIndex, 1)[0];
        this.fieldInfo.splice(evt.newIndex, 0, targetRow);
        for (let index in this.fieldInfo) {
          this.fieldInfo[index].sort = parseInt(index) + 1;
        }
      }
    });
  },
  methods: {
    /** 改变是否全局显示或隐藏 **/
    changeAllShow(val){
      let isList = val ? "1":"0"
      for (let index in this.fieldInfo) {
        this.fieldInfo[index].isList = isList;
      }
    },
    /** 改变字段是否固定显示 **/
    changeFixed(row,fixed){
      row['fixed'] = row['fixed'] == fixed?'false':fixed
    },
    activeStyle(row,fixed) {
      return row['fixed'] == fixed ? {"color": this.theme}:{}
    },
    /** 保存配置 **/
    save() {
      let data ={
        formBuildKey:this.formBuildKey,
        fieldInfo:this.fieldInfo
      }
      let that =this
      request({
        url: '/generator/columnConfig/save',
        method: 'post',
        data: data
      }).then(res => {
        if (res.code == 200) {
          that.msgSuccess(res.msg)
        } else {
          that.msgError(res.msg)
        }
      })
    },
    /** 重置配置 **/
    reset() {
      let that =this
      request({
        url: '/generator/columnConfig/reset/'+this.formBuildKey,
        method: 'get'
      }).then(res => {
        if (res.code == 200) {
          that.msgSuccess(res.msg)
          that.$tab.refreshPage();
        } else {
          that.msgError(res.msg)
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.fixed-box{
  display: flex;
  justify-content: center;
  align-items: center;

  .el-tooltip{
    font-size: 16px;
  }

  .el-tooltip:hover{
    cursor: pointer;
  }

  .divide{
    margin: 0 3px;
  }
}
.column-set{
  height: 18px;
  margin-top: 2px;
}

.column-set:hover{
  cursor:pointer;
}

</style>
